<template>
  <a-modal
    :title="formTitle"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    dialogClass="createFormStyle"
    @cancel="handleCancel"
    :destroyOnClose="true"
    :keyboard="false"
    :maskClosable="false"
    :closable="true"
    centered
    :bodyStyle="bodyStyle"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        class="AsteriskAfter newEditStyle"
      >
        <slot></slot>
      </a-form-model>
    </a-spin>
    <div slot="footer">
      <div v-if="footerSty">
        <a-button @click="handleCancel">{{ $t('cancel') }}</a-button>
        <a-button
          type="primary"
          style="margin-left: 18px"
          @click="handleSubmit"
          :disabled="false"
        >{{ $t('sure') }}</a-button>
      </div>
    </div>
  </a-modal>
</template>
<script>
import lodash from 'lodash'
export default {
  data () {
    return {
      visible: false,
      confirmLoading: false,
      submitDisabled: true
    }
  },
  props: {
    formTitle: {
      type: String,
      default: ''
    },
    originData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    form: {
      type: Object,
      default: () => {
        return {}
      }
    },
    rules: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 弹框中是否有本地上传
    uploadTag: {
      type: Boolean,
      default: false
    },
    footerSty: {
      type: Boolean,
      default: true
    },
    width: {
      type: Number,
      default: 800
    },
    bodyStyle: {
      type: Object,
      default () {
        return {
        }
      }
    }
  },
  methods: {
    add () {
      this.visible = true
    },
    handleSubmit () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('ok')
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.visible = false
    }
  },
  watch: {
    form: {
      handler (val) {
        this.submitDisabled = lodash.isMatch(val, this.originData)
      },
      deep: true
    },
    visible (val) {
      if (!val) {
        this.$refs.ruleForm.resetFields()
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
